$('.go_top').click(function () {
    $('html,body').animate({ scrollTop: 0 }, 200)
})

$(window).scroll(function () {
    const scroll = document.documentElement.scrollTop || document.body.scrollTop
    if (scroll >= 450) {
        $('.floor').show(100, 'linear')
    } else {
        $('.floor').hide(100, 'linear')
    }
})

// 逻辑代码
// 0. 获取元素
// 0-1. 分类列表 ul
const cateBox = document.querySelector('.cate')
// 0-2. 品牌列表
const propsBox = document.querySelector('.props')
// 0-3. 分页盒子
const pageBox = document.querySelector('.pagination')
// 0-4. 商品列表
const goodsBox = document.querySelector('.list')
// 0-5. 获取整体盒子
const box = document.querySelector('.container')

// 1. 准备一个参数的数据集合
const params = {
    q: '*',
    cate: '',
    props: '',
    sort: '',
    page: 0,
    callback: 'fn'
}

// 功能函数, queryStringify()
function queryStringify(obj) {
    let str = ''

    for (let k in obj) {
        str += k + '=' + obj[k] + '&'
    }

    return str.slice(0, -1)
}

// 2. 请求数据的函数
getList()
function getList() {
    // jsonp 利用的是 script 标签的 src 属性
    // 前端提前准备好回调函数
    // 2-1. 创建一个 script 标签
    const script = document.createElement('script')
    // 2-2. 手动添加 src 属性
    script.src = `https://search.mall.360.cn/search/q?${queryStringify(params)}`
    // 2-3. 把 script 标签插入到页面内
    document.body.appendChild(script)
    // 2-4. 把 script 标签删除
    script.remove()
}

// 3. 全局准备一个回调函数 fn, 用于渲染页面
function fn(res) {
    //   console.log(res)
    // 3-1. 渲染分类内容
    bindCateList(res.data.cates.subs)

    // 3-2. 渲染品牌数据
    res.data.options[0] && bindPropsList(res.data.options[0].subs)

    // 3-3. 渲染分页
    bindPagenation(res.total)

    // 3-4. 渲染商品列表
    bindGoodsList(res.data.list)

}

// 3-1. 渲染分类
function bindCateList(list) {
    let str = ''
    str += `
  <li class="cate_item">分类:</li>
  `
    list.forEach(item => {

        str += `
      <li class="cate_item" data-value="${item.value}">${item.text}</li>
    `
    })
    cateBox.innerHTML = str
}

// 3-2. 渲染品牌
function bindPropsList(list) {
    let str = ''
    str += `
  <li class="props_item">品牌:</li>
  `
    list.forEach(item => {

        str += `
      <li class="props_item" data-value="${item.value}">${item.text}</li>
    `
    })
    propsBox.innerHTML = str
}

// 3-3. 渲染分页
function bindPagenation(total) {
    const num = Math.ceil(total / 20)
    let str = `
    <span class="prevBtn">上一页</span>
    <ul>
  `
    for (let i = 0; i < num; i++) {
        str += `<li class="page_item" data-value="${i}">${i + 1}</li>`
    }
    str += `
    </ul>
    <span class="nextBtn">下一页</span>
  `
    pageBox.innerHTML = str
}

// 3-4. 商品列表
function bindGoodsList(list) {
    //   console.log(list)
    let str = ''

    list.forEach(item => {
        str += `
      <li data-id="${item.itemId}">
        <img src="${item.img}" data-id="${item.itemId}">
        <p>${item.title}</p>
        <span>
         ￥ ${(item.price / 100).toFixed(2)}
        </span>
        <button data-id="${item.itemId}">加入购物车</button>
      </li>
    `
    })

    goodsBox.innerHTML = str
}

// 4. 各种点击事件
box.addEventListener('click', e => {
    const t = e.target

    // 4-1. 判断分类
    if (t.className === 'cate_item') {
        // 拿到标签身上的 value 赋值给 params.cate
        params.cate = t.dataset.value
        params.page = 0
        // 从新请求数据渲染页面
        getList()
    }

    // 4-2. 判断品牌
    if (t.className === 'props_item') {
        params.props = t.dataset.value
        params.page = 0
        getList()
    }

    // 4-3. 排序操作
    if (t.className === 'sort_item') {
        params.sort = t.dataset.value
        getList()
    }

    // 4-4. 搜索按钮
    if (t.nodeName === 'BUTTON') {
        // 拿到搜索框内的文本赋值给 cate
        params.q = t.previousElementSibling.value.trim()
        params.page = 0
        getList()
    }

    // 4-5. 切换到某一页
    if (t.className === 'page_item') {
        params.page = t.dataset.value
        getList()
    }
})


const goods = document.querySelector('.main>.contain>.list')
// 点击商品
goods.addEventListener('click', e => {
    if (e.target.nodeName === 'IMG') {
        const goodId = e.target.dataset.id
        window.sessionStorage.setItem('goodId', goodId)
        window.location.href = './detail.html'
    }

    if (e.target.nodeName === 'BUTTON') {
        const goodId = e.target.dataset.id
        console.log(goodId)
        window.sessionStorage.setItem('goodId', goodId)
        window.location.href = './cart.html'
    }
})

